import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'

/** 拖拽组件 */
const Draggable = ({ item, children, className }) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: item.id,
    data: { item },
  })
  if (transform) {
    transform.scaleY = 1
    transform.scaleX = 1
  }

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.8 : 1,
    cursor: 'grabbing',
    position: 'relative',
    zIndex: isDragging ? 2 : 1,
  }

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners} className={className}>
      {children}
    </div>
  )
}

export default Draggable
